<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
    <div class="business-card middle">
        <div class="front">
            <h2>Da Da Deng</h2>
            <span>Web Designer</span>
            <ul class="contact-info">
                <li>
                    <i class="fa fa-tachometer"></i>+028-86119898
                </li>
                <li>
                    <i class="fa fa-qq"></i>10000
                </li>
                <li>
                    <i class="fa fa-wechat"></i>deng1234
                </li>
            </ul>
        </div>
        <div class="back">
            <span>DarkCode</span>
        </div>
    </div>

    <script>
        $('.business-card').click(function () {
            $('.business-card').toggleClass('business-card-active')
        })
    </script>
</body>
</html>